<template>
  <div class="setting">
    <div class="input-item">
      <van-field v-model="nickName" label="昵称" />
      <van-field v-model="introduceSign" label="个性签名" />
      <van-field v-model="password" type='password' placeholder="填写一个新密码" label="修改密码" />
    </div>
    <van-button round class="save-btn" :color="themeStore.primaryColor" type="primary" block @click="modifyUserInfo(introduceSign, nickName, password)">保存</van-button>
    <van-button round class="save-btn" :color="themeStore.primaryColor" type="primary" block @click="userLogout">退出登录</van-button>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import useUserStore from '@/store/user'
import useThemeStore from '@/store/theme'
import useUserInfo from '@/hooks/useUserInfo'
import {editUserInfo} from '@/service/user'

const {userInfo} = useUserStore()
const themeStore = useThemeStore()
const {userLogout, modifyUserInfo} = useUserInfo()

const password = ref('')
const nickName = ref(userInfo.nickName)
const introduceSign = ref(userInfo.introduceSign)
</script>

<style lang="less" scoped>
.setting {
  .save-btn {
    width: 80%;
    margin: 20px auto ;
  }
}
</style>